Framework7 টাচ-ভিত্তিক ইন্টারফেস ডিজাইন করার জন্য একটি আদর্শ ফ্রেমওয়ার্ক, যা মোবাইল ডিভাইস ও টাচস্ক্রিনে ইউজার ইন্টারঅ্যাকশন সহজ করে। Gesture Detection বলতে বোঝায় ব্যবহারকারীর টাচ ইনপুট (যেমন সোয়াইপ, ড্র্যাগ, পিঞ্চ, লং-প্রেস) শনাক্ত করে সেই অনুসারে অ্যাপ্লিকেশনে রেসপন্স করা। Framework7 ডিফল্ট টাচ ইভেন্টগুলো ব্যবহার করে Custom Gesture তৈরি করাও সম্ভব।
Gesture Detection কী?
Gesture Detection হলো ব্যবহারকারীর আঙুলের স্পর্শ, মুভমেন্ট, প্রেসার ইত্যাদি নির্ণয় করে সেগুলোকে নির্দিষ্ট Gesture হিসেবে রূপান্তর করা। উদাহরণ:
- ট্যাপ (Tap): হালকা স্পর্শ
- লং-প্রেস (Long Press/Taphold): কিছুক্ষণ স্পর্শ ধরে রাখা
- সোয়াইপ (Swipe): আড়াআড়ি বা লম্বাভাবে আঙুল সরানো
- পিঞ্চ (Pinch): দুই আঙুল একত্রে আনানো বা দূরে সরানো
Framework7 এর বিল্ট-ইন Gesture সমর্থন
Framework7 কিছু বিল্ট-ইন টাচ ইভেন্ট সমর্থন করে, যেমন:
- tap: ট্যাপ ইভেন্ট
- taphold: দীর্ঘক্ষণ ট্যাপ ধরে রাখা
- swipe: সোয়াইপ ইভেন্ট
- swipeout: লিস্ট আইটেম সোয়াইপ করা
- pull-to-refresh: স্ক্রল করে পুল ডাউন করে রিফ্রেশ করা
এছাড়া Dom7 (Framework7 এর ডম লাইব্রেরি) এর মাধ্যমে লো-লেভেল টাচ ইভেন্ট (touchstart, touchmove, touchend) ব্যবহার করে কাস্টম Gesture ডিটেক্ট করা যায়।
ট্যাপ এবং লং-প্রেস ইভেন্ট উদাহরণ
('.my-element').on('taphold', function() {
console.log('Element long pressed!');
});
উপরের উদাহরণে .my-element এ ট্যাপ বা লং-প্রেস করলে কনসোলে মেসেজ প্রদর্শিত হবে।
সোয়াইপ ইভেন্ট উদাহরণ
সোয়াইপ ইভেন্ট ডিটেক্ট করতে লো-লেভেল টাচ ইভেন্ট ব্যবহার করা যায়। নীচে একটি সাধারণ সোয়াইপ ডিটেক্টর উদাহরণ দেওয়া হলো:
var xStart = null;
var yStart = null;
('.my-swipe-area').on('touchmove', function(e) {
if (!xStart || !yStart) return;
var xEnd = e.touches[0].clientX;
var yEnd = e.touches[0].clientY;
var xDiff = xStart - xEnd;
var yDiff = yStart - yEnd;
if (Math.abs(xDiff) > Math.abs(yDiff)) {
if (xDiff > 0) {
console.log('Swiped left!');
} else {
console.log('Swiped right!');
}
} else {
if (yDiff > 0) {
console.log('Swiped up!');
} else {
console.log('Swiped down!');
}
}
// Gesture ডিটেক্ট করার পর ভ্যারিয়েবল রিসেট করা
xStart = null;
yStart = null;
});
এখানে touchstart ইভেন্টে ইনিশিয়াল টাচ পজিশন সংরক্ষণ করে touchmove এ শেষ পজিশনের সাথে তুলনা করা হয়। এর ভিত্তিতে সোয়াইপ ডিরেকশন নির্ণয় করা হয়।
Custom Gesture তৈরি
Custom Gesture তৈরি করতে আপনাকে লো-লেভেল টাচ ইভেন্ট (touchstart, touchmove, touchend) ব্যবহার করে জেশ্চার যুক্তি (logic) লিখতে হবে। উদাহরণস্বরূপ, পিঞ্চ জেশ্চার ডিটেক্ট করতে আপনাকে একাধিক আঙুলের পজিশন নির্ণয় করে দূরত্বের পরিবর্তন হিসাব করতে হবে।
ধাপগুলো:
- touchstart ইভেন্টে আঙুলের প্রাথমিক পজিশন (finger positions) সংরক্ষণ।
- touchmove এ আঙুলগুলোর বর্তমান পজিশন মাপা, এবং প্রাথমিক পজিশনের সাথে তুলনা করা।
- দূরত্ব বা কোণ নির্ণয় করে নির্দিষ্ট নিয়ম অনুযায়ী Gesture শনাক্ত করা (যেমন যদি দুই আঙুলের দূরত্ব কমছে মানে পিঞ্চ ইন, দূরত্ব বাড়ছে মানে পিঞ্চ আউট)।
- Gesture ডিটেক্ট হলে উপযোগী অ্যাকশন নেওয়া।
Gesture Detection এর সুবিধা
- উন্নত ইউজার এক্সপেরিয়েন্স: Gesture ব্যবহারের মাধ্যমে ব্যবহারকারী অ্যাপকে আরও স্বাভাবিকভাবে ব্যবহার করতে পারে।
- কাস্টম জেশ্চার: আপনার অ্যাপের প্রয়োজন অনুযায়ী ইউনিক Gesture তৈরি করা যায়।
- মোবাইল-ফ্রেন্ডলি ইন্টারঅ্যাকশন: সোয়াইপ, পিঞ্চ, লং-প্রেস ইত্যাদি ব্যবহার করে মোবাইল এবং ট্যাবলেটের জন্য অ্যানিমেশন এবং নেভিগেশন সহজ হয়।
Framework7 টাচ ইভেন্ট এবং Dom7 API ব্যবহার করে Gesture Detection অত্যন্ত সহজ করে তোলে। বিল্ট-ইন ইভেন্টগুলি ব্যবহারের পাশাপাশি কাস্টম Gesture যুক্ত করে আপনার অ্যাপকে আরও ইন্টারঅ্যাকটিভ ও ব্যবহারবান্ধব করে তুলতে পারবেন।
Read more
